<?php
use App\Models\Theme;

Theme::addCss("/admin/default/css/user/index.css");
Theme::addJs("/admin/default/js/user/index.js");
Theme::output();
?>
<meta name="_token" content="{{csrf_token()}}">
@extends('admin.default.layouts.app')

@section('content')
    <el-tabs :active-name="activeName" width="100%">
        <el-tab-pane label="用户管理" name="first">
            <!--查询功能-->
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item>
                    <el-input v-model="formInline.name" placeholder="用户名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
            <!-- 会员列表-->
            <el-table
                    :data="userList"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="ID"
                        width="60">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="用户名"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="email"
                        label="邮箱"
                        width="200">
                </el-table-column>
                <el-table-column
                        sortable
                        prop="created_at"
                        label="注册时间"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="updated_at"
                        label="更新时间"
                        width="200">
                </el-table-column>
                <el-table-column
                        inline-template
                        :context="_self"
                        label="操作"
                        width="150">
                      <span>
                            <el-button @click="handleView($index, row)" type="text" size="small">查看</el-button>
                          <el-button @click="handleEdit($index, row)" type="text" size="small">编辑</el-button>
                          <el-button type="text" @click="handleDelete($index, row)">删除</el-button>
                          {{--<el-button @click--}}
                          {{--="handleDelete($index, row)" type="text" size="small" v-popover:popover5>删除</el-button>--}}
                      </span>
                </el-table-column>
            </el-table>
            <br>
            <!--分页-->
            <div class="block" style="float: right;">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pageSize"
                layout="prev, pager, next, jumper"
                :total="pageTotal">
                </el-pagination>
            </div>

            <!--会员详情-->
            <el-dialog title="用户信息" v-model="dialogUserInfo" size="small">
                <span>用户信息</span><br>
                <span>ID：@{{ userInfo.id }}</span><br>
                <span>用户名：@{{ userInfo.name }}</span><br>
                <span>邮箱：@{{ userInfo.email }}</span><br>
                <span>加入时间：@{{ userInfo.updated_at }}</span><br>
                <span slot="footer" class="dialog-footer">
                <el-button @click="dialogUserInfo = false">取 消</el-button>
                    <el-button type="primary" @click="dialogUserInfo = false">确 定</el-button>
                </span>
            </el-dialog>

            <!--编辑会员-->
            <el-dialog title="编辑用户" v-model="dialogUserEdit" size="small">
                <el-form :model="form">
                    <el-form-item label="用户名" :label-width="formLabelWidth">
                        <el-input v-model="userInfo.name" auto-complete="off"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                <el-button @click="dialogUserEdit = false">取 消</el-button>
                    <el-button type="primary" @click="dialogUserEditAAA">确 定</el-button>
                </span>
            </el-dialog>

            <!--删除操作-->
            <el-dialog title="提示" v-model="dialogUserDelete" size="tiny">
                <span>你确定要删除该条信息吗？</span>
                <span slot="footer" class="dialog-footer">
                <el-button @click="dialogUserDelete = false">取 消</el-button>
                    <el-button type="primary" @click="dialogUserDelete = false">确 定</el-button>
                </span>
            </el-dialog>

            <!--删除操作-->
            {{--<el-popover--}}
                    {{--ref="popover5"--}}
                    {{--placement="top"--}}
                    {{--width="160"--}}
                    {{--v-model="dialogUserDelete">--}}
                {{--<p>确定要删除该用户吗？</p>--}}
                {{--<div style="text-align: right; margin: 0">--}}
                    {{--<el-button size="mini" type="text" @click="dialogUserDelete = false">取消</el-button>--}}
                    {{--<el-button type="primary" size="mini" @click="dialogUserDelete = false">确定</el-button>--}}
                {{--</div>--}}
            {{--</el-popover>--}}
        </el-tab-pane>
        <el-tab-pane label="配置管理" name="second">
            配置管理
        </el-tab-pane>
    </el-tabs>
@endsection